<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-police__customerinfo}">
      <el-form :inline="true" @keyup.enter.native="queryPoliceCasedPieEcharts()">
        <el-form-item>
          <el-date-picker 
            v-model="value" 
            type="daterange" 
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至" 
            start-placeholder="开始日期"
            @change="timeChange"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="queryPoliceCasedPieEcharts()">{{ $t('query') }}</el-button>
        </el-form-item>
      </el-form>
      <div id="J_chartPieBox" class="chart-box" :style="{ width: '100%', height: '500px' }"></div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      chartPie: null,
      chartPieOptions: {},
      dataForm: {
        startDate: "",
        endDate: ""
      },
      value: []
    }
  },
  mounted() {
    this.initChartPie()
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartPie) {
      this.chartPie.resize()
    }
  },
  created() {
    this.queryPoliceCasedPieEcharts()
  },
  methods: {
    timeChange(value) {
      console.log(value == null)
      if (value == null) {
        this.dataForm.startDate = ""
        this.dataForm.endDate = ""
      } else {
        this.dataForm.startDate = value[0]
        this.dataForm.endDate = value[1]
      }
    },
    // 统计已完结订单数量和未完结订单数量
    queryPoliceCasedPieEcharts() {
      console.log(this.dataForm.value)
      this.$http.get('/order/order/echarts/payAndNoPay', {
        params: {
          ...this.dataForm
        }
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.chartPieOptions = res.data
        this.initChartPie()
      }).catch(() => { })
    },
    // 饼状图
    initChartPie() {
      var option = {
        title: {
          text: '订单金额分布图',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.chartPieOptions.realNameList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.chartPieOptions.totalPayList,
            type: 'bar',
            name: '已付费用'
          },
          {
            data: this.chartPieOptions.totalNoPayList,
            type: 'bar',
            name: '未付费用'
          }
        ]
      }
      this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
      this.chartPie.setOption(option)
      window.addEventListener('resize', () => {
        this.chartPie.resize()
      })
    }
  }
}
</script>

<style lang="scss"></style>